﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="interactivespace.aspx.cs" Inherits="en_interactivespace" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interactive Space</title>
    <!-- #include file="/include/tag/en_cssjs.html" -->
    <script src="../js/warmup.js" type="text/javascript"></script>

    <!-- 处理上传 -->
                <script type="text/javascript">
                  <!--
                    var g_langID = "1033"
                    var g_currentPageIndex = 0;
                    var g_sortType = null;
                    var g_sortDirect = "0";         // 默认降序排列

                    var c_aSortByVoteCount = null;
                    var c_aSortByCommentCount = null;
                    var c_aSortByForwardCount = null;

                    $(document).ready(function () {

                        c_aSortByVoteCount = $('#aSortByVoteCount');
                        c_aSortByCommentCount = $('#aSortByCommentCount');
                        c_aSortByForwardCount = $('#aSortByForwardCount');

                        loadWarmups(g_currentPageIndex, g_sortType, g_sortDirect);

                        controlSortButton();
                    });

                    function loadWarmups(currPageIndex, sortType, sortDirect) {
                        var ss = $('#hd_langId').val();
                        var cmdArgs = "&currPageIndex=" + currPageIndex + "&langID=" + ss;
                        if (sortType != null) cmdArgs += "&sortType=" + sortType;
                        if (sortDirect != null) cmdArgs += "&sortDirect=" + sortDirect;
                        var req = new requestCommand(5, cmdArgs);
                        req.get(renderWarmups);
                        return false;
                    }

                    function renderWarmups(pagingList) {
                        clearWarmups();     // 先clear已经存在的作品
                        //alert(pagingList.Capacity);
                        renderElements(pagingList.List);  // 生成作品
                        renderPager(pagingList.Capacity);  // 生成分页
                    }

                    function clearWarmups() {
                        $('#ulElement').html("");
                    }

                    function vote(elementID) {
                        var result = doEVote(elementID);
                        if (result.Result) {
                            alert("Vote successful！");
                            $('#span_vote_' + elementID).html(result.ReturnObject);
                        }
                    }
                    /*
                    renderElements 函数生成如下格式的html
                    <li class="lingbg1">
                    <a href="interactivedetail.aspx?wid=1">
                    <img src="images/element_temp_1.jpg" alt="" />
                    </a>
                    <dl>
                    <dt><a href="#">(<span>12345</span>)</a></dt>
                    <dd><a href="#">(<span>54321</span>)</a></dd>
                    </dl>
                    </li>
                    */
                    function renderElements(elements) {
                        var length = elements.length;
                        var lastCssNum = 0;
                        for (var i = 0; i < length; i++) {
                            var element = elements[i];
                            var elementIndex = 12 * g_currentPageIndex + i;
                            var detailUrl = "interactivedetail.aspx?wid=" + element.ID + "&sortType=" + g_sortType + "&sortDirect=" + g_sortDirect + "&currPageIndex=" + elementIndex;
                            var img = $('<img onerror="this.src=\'/en/images/def_warmup.JPG\'" ></img>');
                            img.attr('src', '/uploadfiles/image/' + element.ImagePath);

                            var a = $('<a></a>');
                            a.attr('href', detailUrl);
                            a.append(img);

                            var aComment = $('<a></a>');
                            aComment.attr('href', detailUrl);
                            aComment.html('(<span>' + element.CommentCount + '</span>)');

                            var dt = $('<dt></dt>');
                            dt.append(aComment);
                            //alert(element.VoteCount);
                            var aVote = $('<a></a>');
                            aVote.attr('href', "javascript:vote(" + element.ID + ");");
                            aVote.html("(<span id='span_vote_" + element.ID + "'>" + element.VoteCount + "</span>)");

                            var dd = $('<dd></dd>');
                            dd.append(aVote);

                            var dl = $('<dl></dl>');
                            dl.append(dt);
                            dl.append(dd);

                            var li = $('<li></li>');
                            li.append(a).append(dl);

                            lastCssNum = i % 5 + 1;
                            var css = 'lingbg' + lastCssNum;
                            li.addClass(css);

                            $('#ulElement').append(li);
                        }

                        if (length % 4 > 0) {
                            for (var i = 0; i < 4 - length % 4; i++) {
                                var li = $('<li></li>');
                                var cssNum = (length + i) % 5 + 1;
                                var css = 'lingbg' + cssNum;
                                li.addClass(css);

                                $('#ulElement').append(li);
                            }
                        }
                    }

                    function renderPager(totalCount) {
                        var pageSize = 12;
                        var pageCount = Math.floor(totalCount / pageSize);
                        if (totalCount % pageSize > 0) pageCount++;

                        var headerUl = createPager(totalCount, pageCount);
                        var footerUl = createPager(totalCount, pageCount);

                        var btnGo1 = $("<input name='' type='button' value='' class='btn' />");
                        btnGo1.click(function () { goPage(pageCount, '1'); });

                        var btnGo2 = $("<input name='' type='button' value='' class='btn' />");
                        btnGo2.click(function () { goPage(pageCount, '2'); });

                        var divJump1 = $('<div></div>');
                        divJump1.addClass('turn');
                        divJump1.html('<span>page</span><input id="txtPage1" name="" type="text" class="num" />');

                        var divJump2 = $('<div></div>');
                        divJump2.addClass('turn');
                        divJump2.html('<span>page</span><input id="txtPage2" name="" type="text" class="num" />');

                        $('#divHeaderPager').html('').append(headerUl).append(divJump1).append(btnGo1);
                        $('#divFooterPager').html('').append(footerUl).append(divJump2).append(btnGo2);
                    }

                    function createPager(totalCount, pageCount) {
                        //首页
                        var imgFirst = $('<img src="images/icon_page_pre.gif" alt="Go to Home" />');
                        var aFirst = $('<a></a>');
                        aFirst.attr('href', "javascript:jumpPage('f'," + pageCount + ");");
                        aFirst.append(imgFirst);

                        var liFirst = $('<li></li>');
                        liFirst.append(aFirst);

                        //上一页
                        var aPrev = $('<a>Prev</a>');
                        aPrev.attr('href', "javascript:jumpPage('p'," + pageCount + ");");

                        var liPrev = $('<li></li>');
                        liPrev.append(aPrev);

                        //页码
                        var liPage = $('<li></li>');
                        var pageNum = (totalCount == 0) ? 0 : g_currentPageIndex + 1;
                        liPage.html(pageNum + '/' + pageCount);

                        //下一页
                        var aNext = $('<a>Next</a>');
                        aNext.attr('href', "javascript:jumpPage('n'," + pageCount + ");");

                        var liNext = $('<li></li>');
                        liNext.append(aNext);

                        //末页
                        var imgLast = $('<img src="images/icon_page_next.gif" alt="Go to last page" />');
                        var aLast = $('<a></a>');
                        aLast.attr('href', "javascript:jumpPage('l'," + pageCount + ");");
                        aLast.append(imgLast);

                        var liLast = $('<li></li>');
                        liLast.append(aLast);

                        var ulPager = $('<ul></ul>');
                        ulPager.append(liFirst).append(liPrev).append(liPage).append(liNext).append(liLast);
                        return ulPager;
                    }

                    function validateInt(str, msg) {
                        if (/^[1-9]+[0-9]*]*$/.test(str)) {
                            return true;
                        } else {
                            alert(msg);
                            return false;
                        }
                    }

                    function goPage(pageCount, num) {
                        var page = $('#txtPage' + num).val();
                        if (validateInt(page, 'Please enter an integer between 1-' + pageCount + '!')) {
                            g_currentPageIndex = parseInt(page) - 1;
                            loadWarmups(g_currentPageIndex, g_sortType, g_sortDirect);
                        }
                    }

                    function jumpPage(dir, pageCount) {
                        switch (dir) {
                            case "f":
                                g_currentPageIndex = 0;
                                break;
                            case "p":
                                g_currentPageIndex--;
                                break;
                            case "n":
                                g_currentPageIndex++;
                                break;
                            case "l":
                                g_currentPageIndex = pageCount - 1;
                                break;
                        }

                        if (g_currentPageIndex < 0) g_currentPageIndex = 0;
                        if (g_currentPageIndex >= pageCount) g_currentPageIndex = pageCount - 1;

                        loadWarmups(g_currentPageIndex, g_sortType, g_sortDirect);
                    }

                    function loadSortedWarmups(type) {
                        if (g_sortType != null) {
                            g_sortDirect = (g_sortDirect == "0") ? "1" : "0";
                        }
                        g_sortType = type;
                        controlSortButton();
                        loadWarmups(g_currentPageIndex, g_sortType, g_sortDirect);
                    }

                    function controlSortButton() {
                        c_aSortByVoteCount.removeClass();
                        c_aSortByCommentCount.removeClass();
                        c_aSortByForwardCount.removeClass();

                        switch (g_sortType) {
                            case "1":   // vote
                                if (g_sortDirect == "0")    // desc
                                    c_aSortByVoteCount.addClass('reddown');
                                else
                                    c_aSortByVoteCount.addClass('red');
                                break;
                            case "2":   // comment
                                if (g_sortDirect == "0")    // desc
                                    c_aSortByCommentCount.addClass('bluedown');
                                else
                                    c_aSortByCommentCount.addClass('blue');
                                break;
                            case "3":   // forward
                                if (g_sortDirect == "0")    // desc
                                    c_aSortByForwardCount.addClass('greendown');
                                else
                                    c_aSortByForwardCount.addClass('green');
                                break;
                            default:
                                break;
                        }
                    }

                    // 该函数为上传图片成功后，被iframe所调用用来显示图片
                    function uploadCallBack(result, filename) {
                        if (result) {
                            $('#hdnUploadedImageName').val(filename);
                            document.getElementById("imgUpload").src = "/uploadfiles/image/" + filename;
                            document.getElementById("imgUpload").style.display = "block";
                            document.getElementById("divDelete").style.display = "block";
                        }
                        else {
                            alert("Image upload failed!");
                        }
                    }

                    // 该函数为删除上传图片
                    function deleteUploadImage() {
                        var url = '/XmlHttpGate.aspx?cmd=3&langID=' + g_langID + '&imgName=' + $('#hdnUploadedImageName').val() + '&random=' + new Date().toLocaleString();
                        jQuery.ajax({
                            url: url,
                            dataType: 'json',
                            success: function (data) {
                                document.getElementById("imgUpload").src = "";
                                document.getElementById("imgUpload").style.display = "none";
                                document.getElementById("divDelete").style.display = "none";
                            }
                        });
                        return false;
                    }

                    function check(f) {
                        if (f.fileField.value == '') {
                            alert('Please select a file!');
                            f.fileField.focus();
                            return false;
                        }

                        if (getSessionMember() == null) {
                            alert("Please sign in");   // 此处需要跳转到登录页面或者打开登录对话框
                            return false;
                        }
                    }

                    function uploadFile() {
                        document.getElementById("btnSubmit").click();
                        //alert("ssss");
                        frmUpload.reset();
                        window.clearInterval(_timerID);
                    }

                    var _timerID = null;
                    function setTimer() {
                        _timerID = window.setInterval("uploadFile()", 100);
                    }

                    function saveWarmup() {
                        // 先判断用户是否已经登录
                        var member = getSessionMember();
                        if (member == null) {
                            alert("Please login first.");
                            document.getElementById('aLogin').fireEvent('onclick');
                            return;
                        }

                        var text = $('#txtDesc').val();
                        if (text.length == 0) {
                            alert("Tell us how your photo represents an element of the UK in your life.");
                            $('#txtDesc').focus();
                            return;
                        }

                        if (text.length > 200) {
                            alert("Tell us how your photo represents an element of the UK in your life in 200 words.");
                            $('#txtDesc').focus();
                            return;
                        }

                        var imgName = $('#hdnUploadedImageName').val();
                        if (imgName == "") {
                            alert("The work picture is not empty!");
                            return;
                        }

                        var url = '/XmlHttpGate.aspx?cmd=4&langID=' + g_langID + '&random=' + new Date().toLocaleString();
                        var result = null;
                        var postXml = "<warmup><imgName>" + imgName + "</imgName><desc><![CDATA[" + text + "]]></desc></warmup>";
                        jQuery.ajax({
                            url: url,
                            type: 'post',
                            async: false,
                            data: postXml,
                            success: function (r) {
                                alert("Submission successful!");


                                $("#viw").attr("src", "images/btn_upload.gif");
                                $('#txtDesc').val("");
                                $('#hdnUploadedImageName').val("");
                              
                                $("#imgUpload").attr("src", "");
                                $("#imgUpload").css("display", "none");
                                $("#divDelete").css("display", "none");
                                loadWarmups(g_currentPageIndex, g_sortType, g_sortDirect);
                            },
                            dataType: 'json'
                        });


                        return false;
                    }
                //-->
                </script> 
</head>
<body>
<div id="main">
  <div class="ukContent">
    <div class="ukLeft">
        <!-- #include file="/include/tag/en_logo.html" -->
        <%=menuModel.GetEnLeftNavi() %>
        <!-- #include file="/include/tag/en_search.html" -->
        <!-- #include file="/include/tag/en_left_ad.html" -->
    </div>
    <div class="ukRight">
      <!-- #include file="/include/tag/en_login.html" -->
      <div id="interactivespace"></div>
      <script type="text/javascript">
          var fo = new FlashObject("swf/kv_warmup.swf", "Flash", "743", "323", "9", "#ffffff");
          fo.addParam("menu", "false");
          fo.addParam("scale", "noscale");
          fo.addParam("wmode", "transparent");
          fo.write("interactivespace");
      </script>
      <div class="titleupload"><img src="images/title_upload.gif" alt="" /></div>
      <input type="hidden" id="hdnUploadedImageName" />
      <input type="hidden" id="hd_langId" value="1033" />
      <iframe id="uploadFileFrame" name="uploadFileFrame" style="display:none" ></iframe>

      
      <script type="text/javascript">
          function a1() {

              var member = getSessionMember();
              if (member == null) {
                  alert("Please login first");
                 
                  return;
              }
              else {

                  openWin('imageeditInterSpace/Default.aspx?LT=en', 700, 780, 'yes');
              }
          }

          function openWin(src, width, height, showScroll) {
              //window.open(src, "", "location=No,status=No,help=Yes,width=" + width + ",height=" + height + ",top='" + ((window.screen.Height - height) / 2) + "',left= '" + ((window.screen.Width - width) / 2) + "';scroll:" + showScroll + ";");
              var top = (window.screen.availHeight - height) / 2;
              var left = (window.screen.availWidth - width) / 2;
              window.open(src, '', 'height=' + height + ',width=' + width + ',top=' + top + ',left=' + left + ',toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no');
          }

          function fillImage(data) {
              if (data) {
                  $('#hdnUploadedImageName').val(data+".jpg");
                  
                  var urla = "../uploadfiles/image/" + data + ".jpg";
                  document.getElementById("imgUpload").src = urla;
                  //$("#viw").css("background-image", "url('" + urla + "')");



                  $("#viw").attr("src", urla);
                  $.post(
                  "imageeditInterSpace/ImgSrc.aspx",
                  { getsrc: "0.7" },
                  function () { 

                  }
                  );
                  
              }
          }

         

      </script>
      <div class="discover">
      	<div class="imgload" onclick="a1()">
         <img id="viw" alt="" src="images/btn_upload.gif"  class="view"/>
          
          
           
          
          <img id="imgUpload" src="" width="97" height="97" alt="" style="display:none" />
          <div id="divDelete" class="deltxt" style="display:none"><a style="cursor:hand" onclick="javascript:return deleteUploadImage();">Delete</a></div>

        </div>
        <dl>
        	<dt><textarea name="" cols="" rows="4" id="txtDesc"></textarea></dt>
            <dd><input type="button" name="btnSave" id="btnSave" value="" onclick="javascript:saveWarmup();"/></dd>
        </dl>
      </div>
      
      <div class="exhibition">
      	<ol class="order">
          <li><span>Sort: </span> </li>
          <!--
            默认的时候3种排序方式的文字颜色是灰色的，在 a 标签上没有样式，如：<a href="#">喜欢</a>
            点击选取排序方式之后，各种不同的样式加入不同的class标签，如：按照评论数排序，样式为 <a href="#" class="blue">评论</a>
          -->
          <li><a id="aSortByVoteCount" href="javascript:loadSortedWarmups('1');" class="red">Like</a></li>
          <li><a id="aSortByCommentCount" href="javascript:loadSortedWarmups('2');" class="bluedown">Comment</a></li>
          <li><a id="aSortByForwardCount" href="javascript:loadSortedWarmups('3');" class="green">Share</a></li>
        </ol>

        <div class="page" id="divHeaderPager">

        </div>
      </div>
      <ul class="element" id="ulElement">
      	<!--
          设计师设计时的理念是，每个li标签的彩色线条背景都是随机调的，就是蓝绿红线的背景，共有5种，我分别给li的class定义为：lingbg1~lingbg5，调用即可直接变换背景
        -->
      </ul>
      <div class="pageline">
      	<!--
          此段<div class="page">与前面出现的page，代码完全一致
        -->
      	<div class="page" id="divFooterPager">
         
        </div>
      </div>
      <div class="h56"></div>
    </div>
    <div class="clear"></div>
  </div>
  <!-- #include file="/include/tag/en_footer.html" -->
</div>
<!-- #include file="/include/tag/bottom_script.html" -->
</body>

</html>
